<template>
	<view class="all">
		<u-navbar :title="data.name=='手机号'?'手机号绑定':data.name" title-bold>
		</u-navbar>
		<view class="carp">
			<text>手机号</text>
			<u-input v-model="form.mobile" type="text" placeholder="请输入手机号" />
			<view class="xian">
			</view>
		</view>
		<view class="carp">
			<text>验证码</text>
			<view class="carp_1">
				<u-input v-model="code" :clearable='false' type="text" placeholder="请输入验证码" />
				<text class="yz" @click="yzm">
					<text v-if="!cl">{{number+'s'}}</text>
					获取验证码</text>
			</view>
			<view class="xian">
			</view>
		</view>
		<view class="carp" v-if="data.name=='支付密码'">
			<text>新密码</text>
			<u-input v-model="form.password" type="text" placeholder="请输入新密码" />
			<view class="xian">
			</view>
		</view>
		<view class="bankicon" @click="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					password: '',
				},
				code: '',
				number: 60,
				value: '',
				value1: "",
				value3: '',
				cl: true,
				data: {}
			};
		},
		onLoad(a) {
			this.data = JSON.parse(a.data)
		},
		methods: {
			// 保存?
			submit() {
				if (!this.form.mobile) {
					this.$toast('请输入手机号', 0)
					return
				}
				if (!this.code) {
					this.$toast('请输入验证码', 0)
					return
				}
				if (!this.form.password && this.data.name != '手机号') {
					this.$toast('请输入密码', 0)
					return
				}
				if (this.data.name == '手机号') {
					this.$api('usermsg/change', {
						mobile: this.form.mobile,
						code: this.code,
					}).then(res => {
						if (res.code == 1) {
							this.$toast(res.msg, 1)
							setTimeout(() => {
								uni.navigateBack({

								})
							}, 500)
						} else {
							this.$toast(res.msg, 0)
						}

					})
					return
				}
				this.$api('userMsg/setPaymentPassword', {
					mobile: this.form.mobile,
					code: this.code,
					password: this.form.password,
				}).then(v => {
					if (v.code == 1) {
						this.$toast(v.msg, 1)
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 500)
					} else {
						this.$toast(v.msg, 0)
					}
				})
				// this.$api('user/mobilelogin', {
				// 	mobile: this.form.mobile,
				// 	code: this.code,
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.$api('userMsg/setPaymentPassword', {
				// 			mobile: this.form.mobile,
				// 			code: this.code,
				// 			password: this.form.password,
				// 		}).then(v => {
				// 			if (v.code == 1) {
				// 				this.$toast(v.msg, 1)
				// 			} else {
				// 				this.$toast(v.msg, 0)
				// 			}
				// 		})
				// 	} else {
				// 		this.$toast(res.msg, 0)
				// 	}
				// })
			},
			countdown() {
				if (this.number == 0) {
					this.cl = true
					return false;
				} else {
					this.number--;
				}
				setTimeout(() => {
					this.countdown();
				}, 1000);
			},
			// 发送验证码
			yzm() {
				if (this.cl) {
					if (!this.form.mobile) {
						this.$toast('请输入手机号', 0)
						return
					}
					this.$api('sms/send', {
						mobile: this.form.mobile,
						event: 'resetpwd',
					}).then(res => {
						if (res.code == 1) {
							if (this.number == 0) {
								this.number = 60
							}
							this.cl = false
							this.countdown()
							this.$toast(res.msg, 1)
						} else {
							this.$toast(res.msg, 0)
						}
					})

				} else {
					this.$toast(this.number + 's后点击', 0)
				}
			}
		}
	}
</script>

<style lang="scss">
	.bankicon {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #703F00;
		opacity: 1;
		width: 300rpx;
		height: 88rpx;
		background: #FFD500;
		opacity: 1;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		margin: 300rpx auto;
	}

	.yz {
		height: 35rpx;
		padding-left: 20rpx;
		display: inline-block;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFB300 !important;
		opacity: 1;
		border-left: 1px solid #FFB300;

		text {
			height: 35rpx;
			display: inline-block;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFB300 !important;
			opacity: 1;
		}

	}

	.carp_1 {
		display: flex;
		align-items: center;
	}

	.carp {
		margin-top: 20rpx;
		padding: 30rpx 30rpx 0rpx 30rpx;

		.xian {
			height: 1rpx;
			background: #EFEFEF;
		}

		text {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			opacity: 1;
		}
	}
</style>
